<template>
	<div v-if="loading" class="mx-auto h-full grid place-items-center text-2xl">
		正在生成中，请耐心等待
	</div>
	<div v-else class="h-full">
		<div v-if="showExample" class="flex flex-col justify-center h-full">
			<div class="mb-2 flex items-center justify-between">
				<div class="text-md font-bold">示例视频</div>
				<div
					class="size-6 rounded-sm cursor-pointer grid place-items-center hover:bg-slate-200"
					@click="showExample = false"
				>
					<i class="iconfont icon-close"></i>
				</div>
			</div>
			<video
				src="https://www.media.io/videos/ai-video-generator/itv_2010.mp4"
				controls
				muted
				autoPlay
				loop
				class="rounded-xl"
			></video>
		</div>
		<div v-else class="p-2">
			<div class="text-lg font-bold mb-2">生成列表</div>
			<div class="text-sm text-slate-400 mb-5">
				您的任务结果将保留7天。请及时检查
			</div>

			<div
				v-if="!videoList.length"
				class="flex flex-col items-center justify-center h-full md:h-[calc(100vh-240px)]"
			>
				<img
					src="https://images.media.io/ai-video-generator/task/video_task_empty_light.png"
					class="w-38 h-38"
				/>
				<div class="text-sm">立即释放你的创造潜力，体验Media AI的魔力！</div>
			</div>

			<div
				v-else
				class="md:max-h-[calc(100vh-240px)] overflow-y-auto scrollable"
			>
				<div class="flex flex-col items-center justify-center">
					<video
						v-for="item in videoList"
						:src="item"
						controls
						muted
						class="rounded-xl mb-5"
					></video>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { bus } from '@/utils/eventBus'
import { loading } from '@/utils/request'

const videoList = ref([])

const showExample = ref(true)

bus.on('videoList', (urls) => {
	videoList.value = urls
	showExample.value = false
})
</script>

<style scoped lang="scss">
.iconfont {
	font-size: 8px;
	color: #7c7c7c;
}
</style>
